<template>
  <section>
    <el-container>
      <el-header style="display: flex;align-items: center">
        <el-select v-model="item.data.vals"  :filterable="true" remote :reserve-keyword="false"
                   default-first-option  placeholder="请输入关键字"
                   :remote-method="searchBtn" multiple value-key="id"
                   size="mini">
          <el-option v-for="disease in diseaseList" :key="disease.id" :label="disease.name" :value="disease">
            <span style="float: left">{{disease.name}}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{disease.code}}</span>
          </el-option>
        </el-select>
      </el-header>
      <el-main>
        <el-form label-width="55px">
          <el-form-item v-for="(v,index) in item.data.vals" :key="index" :label="v.name?v.name:'暂无'">
            <el-row v-for="(m,mIndex) in JSON.parse(v.method)" :key="mIndex"  style="border-bottom:1px solid saddlebrown">
              <el-row v-for="(m2,m2Index) in m" v-if="m2.key === '症见'" :key="m2Index">
                <el-col :span="2">
                  ◎ {{m2.key}}：
                </el-col>
                <el-col :span="20">
                  {{m2.val}}
                </el-col>
              </el-row>
              <el-row v-for="(m2,m2Index) in m" v-if="m2.key !== 'edit' && m2.key !== '症见'" :key="m2Index">
                <el-col :span="2">
                  ◎ {{m2.key}}：
                </el-col>
                <el-col :span="20">
                  <div v-for="(v,vI) in m2.val" :key="vI">{{v}}</div>
                </el-col>
              </el-row>
            </el-row>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <div>
          <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
          <el-button type="danger" size="mini" @click="delPage">删除</el-button>
          <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
        </div>
        <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
        </div>
      </el-footer>
    </el-container>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No8",
    props: ['item'],
    data() {
      return {
        diseaseList:null
      }
    },
    created(){
      if(this.item.data.vals){
        console.log('有val')
      }else {
        Vue.set(this.item.data,'vals',[])
        console.log('没val')
      }
    },
    mounted(){
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      savePage(){
        console.log(this.item.data.vals)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      },
      searchBtn(key){
        this.getDiseaseList(key)
      },
      getDiseaseList(key){
        this.fetch({name:"getDiseaseList",data:{key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.diseaseList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
</style>
